<template>
  <!-- 这是有顶部通栏，头部，有底部，中间内容是要变化的，布局容器 -->
  <AppTopnav />
  <AppHeader />
  <AppHeaderSticky />
   <main class="app-body">
    <!-- 二级路由 -->
    <router-view></router-view>
  </main>
  <AppFooter />
</template>

<script>
import AppTopnav from "@/components/app-topnav.vue";
import AppHeader from "@/components/app-header.vue";
import AppFooter from "@/components/app-footer.vue";
import AppHeaderSticky from "@/components/app-header-sticky.vue";
import { onMounted } from "vue";
import { useStore } from "vuex";
export default {
  name: "XtxLayout",
  components: { AppTopnav, AppHeader, AppFooter,AppHeaderSticky  },
   setup() {
    const store = useStore();
    onMounted(() => {
      // 调用分类的actions，一次就好（app-header-nav会复用，多次调用）
      store.dispatch("category/getList");
    });
  },
};
</script>
